<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a1{
            width: 300px;
            height: 100px;
            background: red;
        }
        .a2{
            font-size: 40px;
        }
        .a3{
            color: white;
            text-align: center;
        }
    </style>
    <script>
        /**
         * 获取元素
         */
        function doGet(){
            // 根据id获取元素
            // var obj = document.getElementById('hello')
            // console.log(obj)
            // console.log(typeof obj) // DOM对象

            // 根据name获取元素
            // var objs = document.getElementsByName('hobbies')
            // console.log(objs)

            // 根据tagName获取元素
            var objs = document.getElementsByTagName('div')
            console.log(objs)
        }

        /**
         * 操作元素
         */
        function doOperate(){
            var obj = document.getElementById('hello')
            
            /**
             * 操作属性
             */ 
            // 获取属性
            // console.log(obj.title)
            // console.log(obj.id)
            // 设置属性
            // obj.title = '这是一个div'

            /**
             * 操作内容 
             */
            // console.log(obj.innerHTML)
            // console.log(obj.innerText)
            // obj.innerHTML = '<h2>哈哈哈哈哈哈</h2>'
            // obj.innerText = '<h2>哈哈哈哈哈哈</h2>'

            /**
             * 操作样式
             */ 
            // console.log(obj.style.width)
            // obj.style.width = '200px'

            // console.log(obj.classList)
            // obj.classList.add('a3')
            obj.classList.remove('a2')

        }

        /**
         * 其他操作
         */
        function doOther(){
            // var li = document.createElement('li')
            // li.innerText = 'lucy'

            // var myul = document.getElementById('myul')
            // // myul.appendChild(li)
            // myul.insertBefore(li, document.getElementById('second'))

            document.getElementById('second').remove()
        }
    </script>
</head>
<body>
    <input type="button" value="获取页面中的元素" onclick="doGet()"> 
    <button onclick="doOperate()">操作页面上的元素</button>
    <button onclick="doOther()">新增/删除页面上的元素</button>
    <hr>

    <!-- <div id="hello" title="this is a div" style="width: 100px;  height: 100px; background: red;">我的div</div> -->
    <div id="hello" title="this is a div" class="a1 a2">我的div</div>
    爱好: <input type="checkbox" name="hobbies" value="eat">吃饭
         <input type="checkbox" name="hobbies" value="sleep">睡觉
        <input type="checkbox" name="hobbies" value="code">写代码</input> <br>
    <div>这又是一个div</div>

    <ul id="myul">
        <li>tom</li>
        <li id="second">jack</li>
        <li>alice</li>
        <li>mike</li>
    </ul>
</body>
</html>